<template>
    <modal :value="showModal" @close="$emit('close')" :title="'本月签到'">
        <div class="flex flex-wrap">
            <div v-for="i in dateProp" :key="i" class="w-1/5 py-2 text-center border border-pink-500">
                <span v-if="handleShow(i)">{{ i }}</span>
                <icon-font name="wancheng1" class="text-red-600" v-else />
            </div>
        </div>
        <div class="mt-3 flex justify-center">
            <button class="bg-red-600 text-white px-6 py-2 rounded-full" @click="handleSign">签到</button>
        </div>
    </modal>
</template>

<script>
import modal from '../modal.vue'
import iconFont from '../IconFont.vue'
import $dayjs from 'dayjs'
import { mapState } from 'vuex'
import { sign, fetchSign } from '../../api/sign'

export default {
    components: { modal, iconFont },

    props: {
        showModal: Boolean,
    },

    data: () => ({
        signList: [],
    }),

    computed: {
        ...mapState(['user']),
        dateProp() {
            return $dayjs($dayjs().endOf('month')).format('DD') / 1
        },

        showSignProp() {
            const { signList } = this
            return signList.map((i) => {
                return $dayjs(i.time).format('DD')
            })
        },
    },

    beforeMount() {
        this.fetchHistory()
    },

    methods: {
        async fetchHistory() {
            const { data } = await fetchSign(this.$http, this.user.account)

            this.signList = data || []
        },

        async handleSign() {
            const {
                data: { message },
            } = await sign(this.$http, this.user.account)

            window.alert(message)
            this.fetchHistory()
        },

        handleShow(item) {
            return !this.showSignProp.find((i) => i == item)
        },
    },
}
</script>

<style scoped>
button {
    outline: none;
}
</style>
